<style lang='scss' scoped>
@import "@/assets/css/variable";
.apply-list {
  .header-box {
    border-bottom: 1px solid $border-c;
    .title {
      padding-top: 2rem;
      padding-left: 1.7rem;
      padding-right: 1.7rem;
    }
  }
  .list-box {
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.7rem;
      border-bottom: 1px solid $border-c;
      .flex{
        flex: 0 0 6rem;
      }
    }
  }
}
</style>
<template>
  <div class="apply-list">
    <div class="header-box">
      <div class="title fs-18 t-bold">满天星阅读打卡赢好礼</div>
      <div>
        <!-- <span>当前共计<i>1</i>个学员</span> -->
        <van-cell
          :title="`当前共计${listNum}人报名`"
          is-link
          :arrow-direction="upDown"
          :value="statusName"
          @click="isPopClick"
        />
      </div>
    </div>
    <div class="list-box" v-if="list && list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span class="flex">{{ item.name }}</span>
        <a :href="`tel:${item.mobile}`">{{ item.mobile }}</a>
        <span>{{ item.statusname }}</span>
      </div>
    </div>
    <div class="no-data padding-all" v-else>暂无报名信息</div>
    <van-action-sheet
      v-model="showAction"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @close = "upDown = 'down'"
    />
  </div>
</template>

<script>
import { Cell, ActionSheet } from "vant";
export default {
  components: {
    [Cell.name]: Cell,
    [ActionSheet.name]: ActionSheet,
  },
  data() {
    return {
      showAction: false,
      upDown: "down",
      list: [],
      listNum: 0,
      actions: [{ name: "全部" }, { name: "未付款" }, { name: "已报名" }],
      status: '',
      statusName: '全部',
      listOld:''
    };
  },
  mounted() {
    
    if (process.env.NODE_ENV == 'production') { //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到"
    }else{
      this.openid = this.$store.state.openid
    }
    console.log("item", this.$store.state.activityItem)
    // this.list = JSON.parse(this.$store.state.activityItem.apply_list);
    this.getOrderPage()
  },
  methods: {
    getOrderPage() {
      let params = {
        activity_id: this.$store.state.activityItem.id,
        status: this.status
      };
      this.$request.getOrderPage(params).then((res) => {
        let list = res.data.data;
        this.listOld = list;
        this.listNum = res.data.totalCount
        list = list.map(res => {
          res.name = res.val[0].name
          res.mobile = res.val[0].mobile
          return res
        })
        this.list = list
      });
    },
    onSelect(item) {
      console.log("onselct",item)
      if (item.name == "全部") {
        this.status = '';
        this.list = this.listOld.filter(res=>res.status==1)
      } else if (item.name == "未付款") {
        this.status = 1;
        this.list = this.listOld.filter(res=>res.status==1)
      } else if (item.name == "已报名") {
        this.status = 2;
        this.list = this.listOld.filter(res=>res.status==2)
      }
      this.statusName = item.name
      this.upDown = 'down'
      // this.getOrderPage()
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // this.show = false;
      // let list = JSON.parse(this.$store.state.activityItem.apply_list || []);
      // if (list == "null") {
      //   this.listNum = 0;
      // } else {
      //   this.listNum = list.length;
      // }

      // console.log(item.name);
      // if (item.name == "全部") {
      //   this.list = list;
      // } else if (item.name == "未付款") {
      //   this.list = list.filter((item) => item.is_pay == 0);
      // } else if (item.name == "已报名") {
      //   this.list = list.filter((item) => item.is_pay == 1);
      // }
    },
    closePop() {
      this.upDown = "down";
    },
    isPopClick() {
      this.showAction = true;
      this.upDown = "up";
    },
  },
};
</script>